import { useEffect, useState } from 'react';
import { Empty } from 'antd';
import { useParams, useLocation } from 'react-router-dom';

import { Heading, Paragraph, List } from '@/components/suggestion/ContentComponent';
import { getSuggestDetail } from '@/api/suggest';
import { homeMap, authMap, controllerMap, storage, urlMap, imagesMap, resourseMap } from '@/utils';
import { COLOR_THEME } from '@/config/theme';

const DetailPage = () => {
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const id = queryParams.get('id');
    const type = location.pathname.split('/')[1];
    const [data, setData] = useState({});
    console.log(urlMap.defaultUrl + resourseMap[type] + data?.coverPath);

    useEffect(() => {
        getSuggestDetail(type, id).then((res) => {
            if (res.code === 200) {
                setData(res.data);
                console.log(res.data);
            }
        });
    }, []);

    return (
        <div
            style={{
                width: '100%',
                height: '100%',
                backgroundColor: COLOR_THEME.BG_SECONDARY,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
            }}
        >
            <div
                style={{
                    width: '70%',
                    height: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                    backgroundColor: 'white',
                    position: 'relative',
                }}
            >
                {data ? (
                    <>
                        <div
                            style={{
                                width: '100%',
                                height: '30%',
                                position: 'relative',
                                zIndex: 0,
                            }}
                        >
                            <img
                                src={urlMap.defaultUrl + resourseMap[type] + data?.comId + '/' + data?.coverPath}
                                alt={type}
                                style={{
                                    width: '100%',
                                    height: '100%',
                                    objectFit: 'cover',
                                }}
                            />
                            <div
                                style={{
                                    position: 'absolute',
                                    top: '70%',
                                    left: '50%',
                                    transform: 'translate(-50%, -50%)',
                                    zIndex: 1,
                                }}
                            >
                                <h1
                                    style={{
                                        margin: 0,
                                        fontSize: '2.5rem',
                                        fontFamily: "'STXingkai', cursive",
                                        // color: COLOR_THEME.TEXT_TERTIARY
                                    }}
                                >
                                    {data?.title}
                                </h1>
                            </div>
                        </div>
                        <div
                            style={{
                                flex: 1,
                                padding: '20px',
                                zIndex: 1,
                                borderTopLeftRadius: '10px',
                                borderTopRightRadius: '10px',
                                backgroundColor: 'white',
                                marginTop: '-20px',
                            }}
                        >
                            {data?.content &&
                                data?.content?.map((item, index) => {
                                    switch (item.type) {
                                        case 'heading':
                                            return (
                                                <Heading key={index} level={item.level}>
                                                    {item.content}
                                                </Heading>
                                            );
                                        case 'paragraph':
                                            return <Paragraph key={index}>{item.content}</Paragraph>;
                                        case 'list':
                                            return <List data={item.listItems} />;
                                        default:
                                            return null;
                                    }
                                })}
                        </div>
                    </>
                ) : (
                    <div
                        style={{
                            width: '100%',
                            height: '100%',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}
                    >
                        <Empty description="暂无数据" />
                    </div>
                )}
            </div>
        </div>
    );
};

export default DetailPage;
